<template>
  <div class="task-box" :class="updateForm.className">
    <div class="node-header ">
      <img onselectstart="return false" @mousedown="onImgMouseDown" :src="updateForm.iconUrl" style="width: 100%">
    </div>
    <div class="node-body">
      <p class="node-title">{{updateForm.name}}</p>
      <p class="node-desc">{{updateForm.desc}}</p>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'TaskNode',
    data () {
      return {
        updateForm: {
          iconUrl: null,
          name: '接口',
          desc: '接口描述'
        }
      }
    },
    inject: ['getGraph', 'getNode'],
    created () {
      try {
        this.updateForm.name = this.getNode().data.name
        this.updateForm.desc = this.getNode().data.desc
        this.updateForm.className = this.getNode().data.className
        this.updateForm.iconUrl = this.getIconUrl()
      } catch (e) {
        this.updateForm.name = this.propsData.name
        this.updateForm.className = this.propsData.className
        this.updateForm.desc = this.propsData.desc
        this.updateForm.iconUrl = this.getIconUrl()
      }
    },
    methods: {
      getIconUrl () {
        let result = require('@/assets/node/api.png')
        if (this.updateForm.className == 'join-node') {
          result = require('@/assets/node/join.png')
        } else if (this.updateForm.className == 'api-node') {
          result = require('@/assets/node/api.png')
        } else if (this.updateForm.className == 'judge-node') {
          result = require('@/assets/node/judge.png')
        } else if (this.updateForm.className == 'parallel-node') {
          result = require('@/assets/node/parallel.png')
        }
        console.log(this.className)
        console.log('获取url')
        return result
      },
      onImgMouseDown (event) {
        event.preventDefault()
      },
      flush () {
        // this.getNode().data.nodeName = 'aaa' + Math.ceil(Math.random() * 10)
        // this.getNode().data.nodeDesc = 'aaa' + Math.ceil(Math.random() * 10)
        //   this.$forceUpdate()
      }
    },
    props: {
      propsData: {
        type: Object,
        default: {
          name: '节点名称',
          desc: '节点描述',
        }
      }
    }
  }
</script>

<style scoped>
  @import "api-node.css";
  @import "start-node.css";
  @import "end-node.css";
  @import "parallel-node.css";
  @import "join-node.css";
  @import "judge-node.css";

  .task-box {
    height: 100%;
    width: 100%;
  }

  .node-title {
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  }
</style>
